<script lang='ts' setup>
//@ts-nocheck
import { useGlobalStore } from '../../store/GlobalStore/index'
import { changePwd } from "../../api/request";
const store = useGlobalStore()
const name = store.userInfo.username
const tid = store.userInfo.tid
const tel=store.userInfo.tphone
var centerDialogVisible = ref(false)
const pwd = ref<any>("")
const pwd2 = ref<any>("")
let role = store.userInfo.role
const jwtToken = localStorage.getItem('jwtToken')
if (role == 1) {
  role = 'teacher'
} else if (role == 2) {
  role = 'student'
} else if (role == 3) {
  role = 'root'
}

const changePWD = async() => {
  if (pwd.value != pwd2.value) {
    console.log("different");
    pwd.value = "";
    pwd2.value = "";
    ElMessage.error('修改密码失败，两次密码不一样')
    return 0;
  }
  
  const changedata = {
    username: tid,
    pwd: pwd.value,
    role
  }
  console.log(changedata);
   let result = await changePwd(jwtToken,changedata)
   console.log("changed", result);
   if(result.status==200) {
    ElMessage({
    message: '密码修改成功',
    type: 'success',
  })
   }
   else {
    ElMessage.error("修改失败")
   }
}
</script>
<template>
  <div id="mainn">
    <ul>
      <li>
        <div class="name">姓名：<span>{{ name }}</span></div>
      </li>
      <li>
        <div class="tid">教师编号：{{ tid }}</div>
      </li>
      <li>
        <div class="tel">教师电话：{{ tel }}</div>
      </li>
    </ul>
    <el-button type="primary" @click="centerDialogVisible = true">修改密码</el-button>
    <el-dialog v-model="centerDialogVisible" title="修改密码" width="30%" align-center>
      <div>新密码：<span><el-input v-model="pwd" placeholder="" /></span></div>
      <div>确认新密码：<span><el-input v-model="pwd2" placeholder="" /></span></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="changePWD(); centerDialogVisible = false;">
            确认修改
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang='scss'>
#mainn {
  margin-left: 100px;
  width: 80%;
  height: 1000px;
  border-radius: 10px;
  background-color: rgba(38, 220, 211, 0.2);
  padding-left: 30px;
  padding-top: 30px;
  font-size: 30px;

  ul {
    li {
      margin-top: 20px;
    }
  }
}
</style>